<template>
  <wxc-tab-page ref="wxc-tab-page"
                :tab-titles="tabTitles"
                :tab-styles="tabStyles"
                title-type="icon"
                :tab-page-height="tabPageHeight"
                @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
    <scroller class="item-container"
              :style="{ height: contentHeight + 'px' }"
              v-for="(value, index) in tabTitles"
              :key="'tab' + index">
        <wxc-pan-item @wxcPanItemPan="wxcPanItemPan">
          <div :style="{ minHeight: contentHeight }">
            <div :is="value.name" @bindPan="wxcPanItemPan"></div>
          </div>
        </wxc-pan-item>
    </scroller>
  </wxc-tab-page>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #ffffff;
  }
</style>
<script>
  const dom = weex.requireModule('dom');
  import { Utils, BindEnv } from 'weex-ui';
  import WxcTabPage from '@/components/tabPage'
  import WxcPanItem from '@/components/wxc-pan-item'
  import Config from '@/config/menu'
  import work from '@/views/workManagement/workCont'
  import project from '@/views/projectProgress/projectContent'
  import operation from '@/views/operationSituation/operationContent'
  import my from '@/views/my/myContent'

  export default {
    components: { WxcTabPage, WxcPanItem, work, project, operation, my },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles,
      tabPageHeight: 1334
    }),
    beforeCreate () {
      this.$notice.loading.show()
      this.$nextTick(() => {
        this.$notice.loading.hide()
      })
    },
    created () {
      this.tabPageHeight = Utils.env.getPageHeight();
    },
    methods: {
      wxcTabPageCurrentTabSelected (e) {
        const index = e.page
      },
      wxcPanItemPan (e) {
        if (BindEnv.supportsEBForAndroid()) {
          this.$refs['wxc-tab-page'].bindExp(e.element);
        }
      }
    },
    computed: {
      contentHeight () {
        return this.tabPageHeight - this.tabStyles.height
      }
    }
  };
</script>